<template>
	<view>
		<u-mask :show="show">
			<view class="u-flex u-flex-col u-row-center u-height-100 u-width-100">
				<view>
					<!-- <view class="video_header u-back-white u-text-center u-p-t-30 u-p-b-30">
						<view class="video_title u-font-bold u-m-b-20">倒计时</view>
						<u-count-down :timestamp="videoData.time" :show-hours="false" font-size="60"
							separator-size="60"></u-count-down>
					</view> -->
					<view v-if="videoData.show">
						<video :src="videoData.url" :initial-time="videoData.initialTime" :autoplay="true"
							:show-play-btn="false" :show-fullscreen-btn="false" :controls="false"></video>
					</view>
				</view>
				<view class="u-m-t-40" @click="close">
					<u-icon size="50" class="u-p-r-8" color="#fff" name="close-circle" />
				</view>
			</view>
		</u-mask>
		<!-- <u-popup v-model="show" mode="center" :mask-close-able="false" border-radius="20">
			<view class="u-p-20">
				<view class="u-text-center u-p-t-30 u-p-b-30">
					<view class="video_title u-font-bold u-m-b-30">倒计时</view>
					<u-count-down :timestamp="time" :show-hours="false" font-size="60" separator-size="60"></u-count-down>
				</view>
				<video :src="src" initial-time="0" :autoplay="true" :show-play-btn="false" :show-fullscreen-btn="false"></video>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	export default {
		props: ['show', 'src', 'time'],
		watch: {
			show(newVal, oldVal) {
				if (newVal == true) {
					this.videoData.url = this.src
					this.videoData.time = this.time
					this.videoData.initialTime = 0
					this.videoData.show = true
				}else{
					this.videoData.url = ''
					this.videoData.time = 0
					this.videoData.initialTime = 0
					this.videoData.show = false
				}
			}
		},
		data() {
			return {
				videoData: {
					url: '',
					time: 0,
					initialTime: 0,
					show: false
				}
			}
		},
		methods: {
			close() {
				this.$emit("close")
			}
		}
	}
</script>

<style scoped>
	.video_header {
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.video_title {
		font-size: 50rpx;
	}

	video {
		height: 800rpx !important;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}
</style>